<template>
	<view class="add-asset">
		<view class="head" :style="{height:`${44+safeTop}px`,paddingTop:`${safeTop}px`}">
			<text class="iconfont icon-left-arrow" @click="goBack"></text>
			<text class="title">新增资产</text>
			<text class="iconfont icon-xinzeng" @click="addBtn"></text>
		</view>
		<view class="content" :style="{paddingTop:`${50+safeTop}px`}">
			<view v-if="listData.length===0" class="no-list">请添加数据！</view>
			<view class="card" v-for="(item,index) in listData">
				<uni-swipe-action-item>
					<view>
						<view class="itemHeadTitle">{{item.assetName}}</view>
						<view class="itemContent">
							<view>
								资产编号：{{item.assetNo}}
							</view>
							<view>
								备注：{{item.remarks}}
							</view>
						</view>
					</view>
					<template v-slot:right>
						<view class="right-icon-edit" @click="toEdit(index)">
							<uni-icons type="compose" size="30" color='#fff'></uni-icons>
							<view>编辑</view>
						</view>
						<view class="right-icon" @click="toDel(index)">
							<uni-icons type="trash" size="30" color='#fff'></uni-icons>
							<view>删除</view>
						</view>
					</template>
				</uni-swipe-action-item>
			</view>


			<uni-popup ref="popupRef" type="bottom">
				<view class="formMain">
					<h3>添加资产</h3>
					<uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-position="top"
						label-width="100">
						<uni-forms-item label="资产名称" name="assetName" required>
							<uni-easyinput type="text" v-model="formData.assetName" placeholder="" />
						</uni-forms-item>
						<uni-forms-item label="资产编号" name="assetNo" required>
							<uni-easyinput type="text" v-model="formData.assetNo" placeholder="" />
						</uni-forms-item>
						<uni-forms-item label="备注" name="remarks">
							<uni-easyinput type="textarea" v-model="formData.remarks" placeholder="" />
						</uni-forms-item>
					</uni-forms>
					<button @click="confirmBtn">确认</button>
				</view>
			</uni-popup>
			<view class="bottom-btn">
				<button class="toQR" @click="submitBtn"><text
						class="iconfont icon-jsontijiao"></text>&nbsp;&nbsp;提交</button>
			</view>
		</view>
		<MessageTip ref="messageTip" :tipContent="'确认删除吗？'" @clickType="handleShowOrHideTip"/>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {updateAssetCheck} from '@/common/api/assetCheckAPI.ts'
	const messageTip = ref()
	const safeTop = ref(uni.getSystemInfoSync().safeArea.top)
	const checkStoreId = ref()
	const version = ref()
	const listData = ref([])
	const formRef = ref()
	const popupRef = ref()
	const formData = ref({})
	const flag = ref(false)
	const rules = {
		assetName: {
			rules: [{
				required: true,
				maxLength: 50,
				errorMessage: '必填且不大于50个字符'
			}]
		},
		assetNo: {
			rules: [{
				required: true,
				maxLength: 50,
				errorMessage: '必填且不大于50个字符'
			}]
		},
		remarks: {
			rules: [{
				maxLength: 200,
				errorMessage: '不大于200个字符'
			}]
		},
	}
	
	onLoad(param=>{
		checkStoreId.value = param.checkStoreId
		version.value = param.version
	})
	const toEdit = (idx) => {
		flag.value = true
		formData.value = listData.value[idx]
		popupRef.value.open()
	}
	const toDel = (idx) => {
		messageTip.value.openTip()
	}
	const handleShowOrHideTip = (type:string)=>{
			if(type=='yes'){
				listData.value.splice(idx, 1)
			}
		}
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const addBtn = () => {
		flag.value = false
		popupRef.value.open()
	}
	const submitBtn = () => {
		if(listData.value.length==0){
			uni.showToast({
				icon:"none",
				title:'请先添加数据！',
			})
			return
		}
		listData.value.forEach(item=>{
			item.checkType=1
		})
		updateAssetCheck({checkStoreId:checkStoreId.value,newAssets:listData.value,version:version.value}).then((res:any)=>{
			if(res.code==0){
				uni.showToast({
					title:res.message,
					icon:"none",
					duration:500
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:`/pages/checkAssets/checkDetail/index?checkStoreId=${checkStoreId.value}&version=${version.value}`
					})
				},500)
				
			}
		})
	}
	const confirmBtn = () => {
		formRef.value.validate().then(res => {
			if (!flag.value) {
				listData.value.push({
					...res
				})
			} else {
				listData.value.forEach(item => {
					if (item.assetNo === formData.value.assetNo) item = {
						...formData.value
					}

				})
			}
			formData.value = {}
			popupRef.value.close()
		})
	}
</script>

<style lang="scss" scoped>
	.add-asset {
		height: 100%;
		position: relative;
		background-color: #eee;

		.head {
			width: 100%;
			box-sizing: border-box;
			background-color: #026751;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 16rpx;
			position: fixed;

			.title {
				font-weight: bold;
			}

			.icon-left-arrow {
				font-size: 50rpx !important;
			}

			.icon-xinzeng {
				font-size: 40rpx !important;
			}
		}

		.content {
			padding: 100rpx 20rpx 0 20rpx;

			.no-list {
				padding: 30px 0;
				text-align: center;
				color: #999;
			}

			.card {
				margin-top: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.itemHeadTitle {
					padding: 10px 25px;
					font-weight: bold;
					color: #333;
					border-bottom: 1px solid #ddd;
				}

				.itemContent {
					font-size: 14px;
					padding: 10px 25px;
				}

				.right-icon {
					height: 100%;
					background-color: #dc143c;
					color: #fff;
					padding: 50rpx 20px;
					box-sizing: border-box;
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
				}

				.right-icon-edit {
					height: 100%;
					background-color: #ff9d02;
					color: #fff;
					padding: 50rpx 20px;
					box-sizing: border-box;
					border-top-right-radius: 0px;
					border-bottom-right-radius: 0px;
				}
			}

			.formMain {
				background-color: #fff;
				padding: 10px 30px;
				margin-top: 80px;

				h3 {
					color: #666;
					text-align: center;
					padding-bottom: 10px;
				}

				button {
					background-color: #026751;
					color: #fff;
				}
			}
		}
	}
</style>
